<template>
  <div class="app-container">
    <renew-record-filter @on-filter="submitFilterForm"/>
    <el-table
      :data="tableData.list"
      v-loading="loading"
      element-loading-text="加载中..."
      show-summary
      :summary-method="getLocalSummaries"
      class="el-table-align-center">
      <el-table-column prop="tradeNo" label="交易单号"></el-table-column>
      <el-table-column label="交易时间" prop="createTime">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="交易类型" prop="tradeType"></el-table-column>
      <el-table-column label="代理账户" prop="parentName"></el-table-column>
      <el-table-column label="会员账户" prop="userName"></el-table-column>
      <el-table-column label="金额" prop="amount">
         <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="手续费" prop="commFee">
          <template slot-scope="{row}">
            {{row.commFee | currency}}
          </template>
      </el-table-column>
      <el-table-column label="手续费比例" prop="commFeeRate">
        <template slot-scope="{row}">
          {{row.commFeeRate}}%
          <!--{{(row.commFee / row.amount).toFixed(2)*100}}%-->
        </template>
      </el-table-column>
      <el-table-column label="返利" prop="rebate">
        <template slot-scope="{row}">
          {{row.rebate | currency}}
        </template>
      </el-table-column>
      <el-table-column label="返利比例" prop="rebateRate">
        <template slot-scope="{row}">
          {{row.rebateRate}}%
          <!--{{(row.commFee / row.amount).toFixed(2)*100}}%-->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {grid, dialog} from '@/build'
   import {getUpAmountFeeDetail} from '@/services/api/commission';
  import RenewRecordFilter from "./renewRecordFilter";


  export default {
    name: "commission-renew-record",
    components: {
      RenewRecordFilter
    },
    mixins: [grid, dialog],
    data() {
      const momentTime=[moment().startOf('month').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
      return {
        tableData: {
          total:0,
          list:[],
          sum:{}
        },
        localSummariesText:'当前页汇总 / 所有页汇总',
        filters: {
          stime:moment(momentTime[0]).valueOf(),
          etime:moment(momentTime[1]).valueOf() + 999,
          size: 20,
          page: 1,
          tradeType:0,
        },
        statistic: [
          {
            index: 1,
            prop: "createTime",
            format: value => {
              return <div></div>;
            }
          },
          {
            index: 5,
            prop: "amount",
            format: value => {
              return <div> {_.currency(value)} / {_.currency(this.tableData.sum.amount)}</div>;
            }
          },
          {
            index: 6,
            prop: "commFee",
            format: value => {
              return <div> {_.currency(value) } / {_.currency(this.tableData.sum.fee)} </div>;
            }
          },
          {
            index: 7,
            prop: "percentage",
            format: value => {
              return <div> </div>;
            }
          },{
            index: 8,
            prop: "rebate",
            format: value => {
              return <div> {_.currency(value)} / {_.currency(this.tableData.sum.rebate)}</div>;
            }
          },{
            index: 9,
            prop: "rebateRate",
            format: value => {
              return <div> </div>;
            }
          }
        ],
      }
    },
    methods: {
      submitFilterForm(formInline) {
        const {time,tradeType,tradeNo,userName,parentName,filterMin,filterMax} = formInline;
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          stime = moment(time[0]).valueOf();
          etime = moment(time[1]).valueOf() + 999;
          formInline = {...formInline, stime, etime}
        } else {
          this.filters.stime = undefined;
          this.filters.etime = undefined;
        }
        this.filters = {...this.filters,tradeType,tradeNo,userName,parentName,filterMin,filterMax,stime,etime}
        this.gridSearch();
      },
    },
    mounted() {
      this.bindGet(getUpAmountFeeDetail, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format: data => {
          data.list.forEach((v,k)=>{
            this.$set(v,'percentage',(v.commFee / v.amount*100).toFixed(2) + '%')
          })
          return data;
        }
      });
      this.doGet({action: 'getGrid'});
    }
  }
</script>

<style scoped>

</style>
